<template>
	<view class="">
		<view class="box" @click="orderxq" v-for="(item,index) in arr" :key="index">
			<image :src="item.img" mode=""></image>
			<view class="rightbox">
				<view class="xq">
					<view class="nr">
						<view class="smallbox">
							<view class="name">
								{{item.name}}
							</view>
							<view class="shuliang">
								X{{item.num}}
							</view>
						</view>
						<view class="rl" v-if="flag">
							{{item.attribute}}
						</view>
						<view class="pingjiabox">
							<view class="rl" v-if="flag">
								单价：{{item.money}}
							</view>
							<view class="pj" @click.stop="remark(item.id)" v-if="state==4">
								评价商品
							</view>
						</view>

						<view class="jf" v-if="!flag">
							积分：100
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			flag: {
				type: Boolean,
				default: true
			},
			arr: {
				type: Array,
				default: []
			},
			settlement_id: {
				type: String,
			},
			state: {
				type: String
			}
		},
		methods: {
			orderxq() {
				this.$emit('orderxq')
			},
			remark(v) {
				this.jumpLink({
					link: "/pages/issue_remark/index",query:{id:v,settlement_id:this.settlement_id}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;

		image {
			width: 170rpx;
			height: 170rpx;
		}

		.rightbox {
			margin-left: 30rpx;
			width: 500rpx;

			.xq {

				.nr {
					.smallbox {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.name {
							color: #282828;
							font-family: MicrosoftYaHei;
							font-size: 26rpx;
							margin-top: 17rpx;
							width: 380rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.shuliang {
							font-family: MicrosoftYaHei;
							font-size: 28rpx;
							color: #282828;
							margin-top: 14rpx;
						}
					}


					.rl {
						font-family: MicrosoftYaHei;
						font-size: 20rpx;
						color: #666666;
						margin-top: 25rpx;
					}

					.pingjiabox {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.rl {
							font-family: MicrosoftYaHei;
							font-size: 20rpx;
							color: #666666;
							margin-top: 25rpx;
						}

						.pj {
							font-size: 24rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #FF6633;
						}

						.ckpj {
							font-size: 24rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #666666;
						}
					}

					.jf {
						font-family: MicrosoftYaHei;
						font-size: 20rpx;
						color: #666666;
						margin-top: 84rpx;
					}
				}
			}
		}
	}
</style>
